
import { NavBar, Toast } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import { ClosedEye, EyeO } from '@react-vant/icons';
import { useLocation, useNavigate } from 'react-router-dom';
import { http } from '../../utils'
import { ConfigProvider, Button, Notify } from '@nutui/nutui-react'
import { useState } from 'react';
import { Input, } from 'react-vant';
import { GetVerifyPhone } from '../../module/Fun'
import { useSelector } from 'react-redux';
const GetCodePassword = ({}) => {
    const navigate = useNavigate();
    const location = useLocation();
    const [inputVal, setInputVal] = useState('')
    const [code, setCode] = useState('')
    const [isShowCount, setIsShowCount] = useState(false)
    const [countTime, setCountTime] = useState(60)
    const phone = useSelector((store) => store.carts.UserMessage.phone)
    const handleSubmit = async () => {
        if (!code) {
            Notify.show({ type: 'warning', message: '验证码未填写' })
            return
        }
        if (!code && !isShowCount) {
            Notify.show({ type: 'warning', message: '验证码过期，请重新发送' })
            setInputLoginCode('')
            return
        }
        if (inputVal == code) {
            if(location.state.path){
                navigate('/outlet/putPhone')
            }else{
                navigate('/outlet/putNewPassword')
            }
        } else {
            setInputVal('')
            Notify.show({ type: 'danger', message: '验证码错误，请重新输入' })
        }
    }

    const onSetInterval = () => {
        let timeFun = setInterval(() => {
            setCountTime(prevTime => {
                const newTime = prevTime - 1;
                if (newTime === 0) {
                    clearInterval(timeFun);
                    setIsShowCount(false)
                    setCode('')
                }
                return newTime;
            });
        }, 1000)
    }

    const getCode = async () => {
        onSetInterval()
        setIsShowCount(true)
        let res = await http.post('/main/getCode', { phoneNumber: phone })
        if (res.code == 200) {
            setCode(res.phoneCode)
        }
    }

    const darkTheme = {
        nutuiNavbarBackground: '#ffffff',
        nutuiInputPadding: '0.1rem 0',
        nutuiInputFontSize: '0.18rem',
        nutuiButtonDefaultHeight: "0.4rem"
    };
    return (
        <div style={{ paddingTop: "0.15rem" }}>
            <ConfigProvider theme={darkTheme}>
                <NavBar
                    back={<ArrowLeft />}
                    onBackClick={(e) => navigate('/outlet/accountSafety')}
                >
                </NavBar>
                <div style={{ marginTop: "0.2rem", padding: "0 0.4rem" }}>
                    <h2 style={{ fontSize: "0.3rem" }}>设置新手机号</h2>
                </div>
                <div style={{ marginTop: "1rem", padding: "0 0.4rem" }}>
                    <Input
                        placeholder="请输入验证码"
                        onChange={(value) => setInputVal(value)}
                        value={inputVal}
                        type={ 'text' }
                        disabled={!isShowCount}
                        suffix=
                        {
                            <Button type="primary" fill="outline" onClick={getCode}>
                                {
                                    isShowCount ?
                                        <>重新发送{countTime}s</>
                                        :
                                        <>获取验证码</>
                                }
                            </Button>
                        }

                    />
                </div>
                <div style={{ marginTop: "0.3rem", padding: "0 0.4rem" }}>
                    <Button
                        type="default"
                        color='linear-gradient(to right, #ff9600 , #fe4801)'
                        block
                        onClick={handleSubmit}
                    >
                        确定
                    </Button>
                </div>
            </ConfigProvider>

        </div>
    )
}
export default GetCodePassword;




